<script setup lang="ts">
import { ref, reactive, toRefs, onBeforeMount, computed, watch } from 'vue'
import { useMainStore } from '@/store/main'

defineProps()

const count = ref(0)
const mainStore = useMainStore()

const update = () => {
  mainStore.$patch({
    name: 'name被改变，length也变了',
  })
}

const num = ref(0)
const obj = reactive({
    name: 'kaho',
    age: 28
})
let {name, age} = toRefs(obj)
setInterval(()=> {
    num.value++
    age.value++
}, 1000)

onBeforeMount(()=> {
    console.log('onBeforeMount')
})

watch(
    ()=> obj.age,
    (curAge, preAge) => {
        console.log("新值:", curAge, "老值:", preAge);
    }
);
</script>



<template>
  <div>
    <h1>{{ msg }}</h1>
    <button type="button" @click="count++">count is: {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test hot module replacement.
    </p>
    <span>{{ mainStore.name }}, {{ mainStore.nameLen }}</span>
    <button @click="update">change</button>
    <span>{{num}}, {{age}}, {{name}}</span>
  </div>
</template>

<style scoped lang="scss">
a {
  /* color: #42b983; */
  color: $test-color;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
